<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:360px;
				height:400px;
				border:1px solid red;
				margin:0 auto;
			}
			#box .top{
				height:60px;
				background: yellow;
			}
			#box .top div{
				width:120px;
				height:60px;
				background: black;
				color:white;
				font:bold 32px/60px "微软雅黑";
				text-align: center;
				float:left;
			}
			#box .top div.active{
				background: crimson;
			}
			#box .content{
				height:340px;
				position:relative;
			}
			#box .content div{
				position:absolute;
				top:0;
				left:0;
				height:340px;
				width:360px;
				background: chartreuse;
				text-align: center;
				line-height: 340px;
				font-size:148px;
				color:white;
				display: none;	
			}
			#box .content .red{
				background: red;
			}
			#box .content .blue{
				background: blue;
			}
			#box .content .green{
				background: green;
			}
			#box .content .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top">
				<div class="active">红色</div>
				<div>蓝色</div>
				<div>绿色</div>
			</div>
		
			<div class="content">
				<div class="red active">红色</div>
				<div class="blue">蓝色</div>
				<div class="green">绿色	</div>
			</div>
		</div>
		
		<script>
			window.onload = function(){
//				从效果可见,一切的开始都源于点击事件.我首先需要获得要操作的对应元素对象。
//				获得最外层Box标签对象。通过document.getElementById铺货的元素是一个对象。
				var oBox = document.getElementById('box');
//				console.dir(oBox);
//				凡是能用点操作的,都是对象
//				console.log(oBox.clientHeight);这句话是为了让各位大哥明白,oBox真的是一个对象,因为可以用点操作
				
				var topBox = oBox.getElementsByClassName('top')[0];//topBox是一个数组，数组中的每一个元素都是一个对象。【Object,Object,Object】.要用第一个top，索引值对应的是0，所以要加[0].
				var btns = topBox.getElementsByTagName('div');
//				获得所有的显示隐藏div数组集合
				var oContent = oBox.getElementsByClassName('content')[0];
				var oShows = oContent.getElementsByTagName('div');
//				console.log(btns);
//				var arr = [1,23,5];
//				console.log(arr);以上三句是为了让给位爷明白，tagName铺货出来的也是数组，数组里面装的是元素标签对象。
				
//				btns[0].onclick = function(){
//					alert(0);
//				}
//				btns[1].onclick = function(){
//					alert(1);
//				}
//				btns[2].onclick = function(){
//					alert(2);
//				}
//				用循环绑定单击事件,执行的结果相当于是上面这样.
				
				for(var i=0;i<btns.length;i++){
//					在点击之前给每个按钮div编上号,一边点击时获得他的编号.操作方式是，增加一个自定义的属性
					btns[i].index = i;
//					绑定单击事件
					btns[i].onclick = function(){
//						一/让所有的背景变黑
						for(var j=0;j<btns.length;j++){
							btns[j].style.backgroundColor = 'black';
						}
						//console.log(this);//当你看不明白this是什么的时候，这句话可能会帮助到你。请打开你的控制台，一个一个按钮点击，你会发现，this就是你点击的当前按钮。如果你在多想一层，意味着，通过改变this.style.background = 'red'.就可以让当前点击的按钮背景变为红色
//						二/让我点的这个变红
						this.style.backgroundColor = 'red';
						
						//console.dir(this);//这句话是希望各位查看打印的结果，在这个对象里面会看到自定义的属性 index的值
						
						for(var k=0;k<oShows.length;k++){
							oShows[k].style.display = 'none';
						}
						oShows[this.index].style.display = 'block';
						
					}
				}
				
//				
//				btn[i].index = i;
//				
//				var obj = {};
//				obj.name = 'yuonly';
//				obj.age = '18';
//				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			}
		</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
